<template>
  <div id="wrap" :style="{ fontSize:fontSize + 'px' }">
    <div class="card">
      <div @click.stop="open" :style="{ minHeight: height }" class="questionTitle">
        <div class="title">
          <div :style="{ fontWeight: isOpen ? 'bold' : 'normal', color: isOpen ? '#546BFF' : '' }">{{description}}</div>
          <i class="iconfont icon-xiangyou1" :class="{ iconOpenClass : isOpen }"></i>
        </div>
      </div>
      <div class="questionContent" :class="{ openClass : isOpen }">
        <div v-if="typeof choice === 'object'" class="helpdoc-p">
          <template v-for="(item, idx) in choice" >
            <img @click="selectedImg(item)"
                 class="previewer-demo-img"
                 v-if="item.indexOf('image') > -1"
                 :src="require('../../assets/img/helpDoc/' + item)" />
            <p style="display: block" v-else v-html="item"></p>
          </template>
        </div>
        <div v-else class="helpdoc-p" v-html="choice">
        </div>
      </div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'question-card',
  props: {
    height: {
      default: '4.9em',
      type: String
    },
    choice: {
      default: '',
      type: String | Object
    },
    description: {
      default: '',
      type: String
    },
    idx: {
      default: '',
      type: String
    },
    isOpen: {
      default: false,
      type: Boolean
    }
  },
  data () {
    return {
      fontSize: 12,
      selectedAnswer: '',
      idx: 0
    }
  },
  methods: {
    selected (val, key) {
      this.selectedAnswer = val
      let body = {
        idx: this.idx,
        key: key
      }
      this.$emit('selectedAnswer', body)
    },
    selectedImg (item) {
      let imgs = []
      this.choice.forEach((arr, idx) => {
        if (/image[0-9].*/g.test(arr)) {
          imgs.push(arr)
        }
      })
      imgs.forEach((img, idx) => {
        if (item === img) this.$emit('preview', idx)
      })
    },
    open (e) {
      this.$emit('open')
      this.$emit('clientTop', e)
    }
  },
  created () {
    this.fontSize = this.fontSize * document.body.offsetWidth / 320
  }
}
</script>

<style lang="less">
.helpdoc-p {
  overflow-y: scroll;
  overflow-x: scroll;
  max-height: 400px;
  display: block;
  img {
    width: 80% !important;
    max-height: 800px !important;
  }
  * {
    background:white !important;
  }
  > * {
    font-size: 1em !important;
  }
  > span {
  }
  > p {
    img {
      margin-left: 15px;
      @media screen and (max-width:375px) and (min-width:321px) {
        margin-left: 25px;
      }
      @media screen and (min-width: 376px){ 
        margin-left: 35px;  
      }
    }
    > p {
      font-size: 1em !important;          
    }
    span {
      font-size: 1em !important;
    }
  }
  table {
    margin-left: 0 !important;
    font-size: 1em !important;
    * {
      font-size: 1em !important;
    }
    td {
      width: 33.3% !important;
    }
  }
}
</style>

<style lang="less" scoped>
* {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #666;
  width: 100%;
}
.card {
  flex-direction: column;
  width: 100%;
  display: flex;
  flex: 1;
}
.questionTitle {
  background: white;
  flex-direction: column;
  flex: 1;
  border-bottom: 1px solid #E9E9E9;
  padding: 0.2em 0;
  .title {
    justify-content: space-between;
    div {
      font-size: 1em !important;
      flex: 8;
      padding-left: 0.8em;
      display: flex;
      justify-content: flex-start
    }
    i {
      flex: 1;
      color: rgba(102,102,102,0.50);
      transition: all 0.3s;
    }
  }
  .selected {
    padding-top: 1em;
    height: 2em;
    i {
      flex: 1;
      color: #4D66FF;
      font-size: 1.5em;
    }
    div {
      flex: 9;
      font-size: 1.2em;
      justify-content: flex-start;
      color: #AAA;
    }
  }
}
.hasAnswer {
  height: 7em;
}
.questionContent {
  display: flex;
  transition: all 0.3s;
  max-height: 0px;
  min-height: 0px;
  padding-bottom: 0;
  justify-content: flex-start;
  transition: all ease-out 0.2s;
  overflow: scroll;
  flex: 1;
  div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0.5em 0.8em;
  }
}
.openClass {
  max-height: 400px;
  transition: all ease-in 0.3s;
  border-bottom: 1px solid #E9E9E9;
  overflow: hidden;
}
.iconOpenClass {
  transform:rotate(90deg)
}

</style>